<template>
  <!-- 手动考勤 -->
  <el-drawer
    :wrapperClosable="false"
    :with-header="false"
    title="考勤"
    :visible="open"
    size="700px"
    direction="rtl"
    :before-close="drawer_handleClose"
  >
    <div style="height: 100vh" class="rela">
      <div class="drawer-title flexBet">
        <div class="t1">考勤</div>
      </div>
      <div class="drawer-content">
        <!-- 搜索项 -->
        <div class="search_courseNo">
          {{ attendanceTime }}{{ attendanceNames }}
        </div>
        <div class="search_bar flex">
          <div class="inputs flex">
            学生&nbsp;&nbsp;
            <el-input
              style="width: 180px"
              class="inputstyle"
              v-model="queryParams.search"
              placeholder="姓名/学号"
              clearable
              @clear="getDrawerList('again')"
              @keyup.enter.native="getDrawerList('again')"
            ></el-input>
          </div>
          <div
            class="primaryBorderBtn w88 mr12 ml24"
            @click="getDrawerList('again')"
          >
            搜索
          </div>

          <div class="normalBtn w88 ml12" @click="reset">重置</div>
          <!-- <div class="normalBtn" style="width: 114px" @click="confirmexport">
            <img src="@/assets/images/getScore/download.png" alt="加载失败" />
            <div>下载考勤</div>
          </div> -->
        </div>

        <div class="data_table mt16">
          <!-- 问卷列表 -->
          <el-table
            border
            v-loading="loading"
            :data="drawerList"
            height="calc(100vh - 330px)"
          >
            <el-table-column
              show-overflow-tooltip
              label="学号"
              align="center"
              prop="studentNum"
            >
              <template slot-scope="scope">
                {{ scope.row.studentNum ? scope.row.studentNum : '--' }}
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="学生姓名"
              align="center"
              prop="name"
            >
              <template slot-scope="scope">
                {{ scope.row.name ? scope.row.name : '--' }}
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="考勤情况"
              align="center"
              prop="branchName"
            >
              <template slot-scope="scope">
                <el-dropdown>
                  <span class="el-dropdown-link">
                    <span
                      class="bottom_line"
                      v-for="(item, index) in status"
                      :key="index"
                      v-if="item.value == scope.row.status"
                    >
                      {{ item.label }}
                    </span>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      class="bottom_line"
                      v-for="(item, index) in status"
                      v-if="item.value != scope.row.status"
                      :key="index"
                      @click.native.stop="
                        statusChoose(item, scope.row, scope.$index, 'status')
                      "
                    >
                      {{ item.label }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              label="备注"
              align="center"
              prop="branchName"
              width="290"
            >
              <template slot-scope="scope">
                <el-input
                  style="width: 265px"
                  class="inputstyle"
                  v-model="scope.row.remark"
                  placeholder="请输入"
                  clearable
                  @blur="
                    statusChoose(scope.row, scope.row, scope.$index, 'remark')
                  "
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="search_bar flexEnd absolute" style="bottom: 56px">
        <div
          class="normalBtn w88"
          @click="drawer_handleClose()"
          style="width: 100px"
        >
          取消考勤
        </div>
        <div
          class="primaryBtn w88"
          @click="saveDrawer()"
          style="margin-right: 40px; width: 100px; margin-left: 20px"
        >
          保存
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import {
  deleteTeacherAttendance,
  attendanceStudentListByCourseScheduling,
  recordAttendance
} from '@/api/tea_studentGrade/attendance'

export default {
  props: {
    open: {
      type: Boolean
    },
    attendanceTeacherId: {
      type: [Number, String]
    },
    courseSchedulingId: {
      type: [Number, String]
    }
  },
  watch: {
    open(val) {
      if (val) {
        this.queryParams = { search: '' }
        this.getDrawerList('first')
      }
    }
  },
  created() {
    this.getDrawerList('first')
  },
  data() {
    return {
      status: [
        // { value: 0, label: "正常", sort: 6 },
        // { value: 1, label: "迟到", sort: 3 },
        // { value: 2, label: "早退", sort: 4 },
        // { value: 3, label: "请假", sort: 5 },
        // { value: 4, label: "旷课", sort: 1 },
        // { value: 5, label: "迟到&早退", sort: 2 },
        { value: 0, label: '正常', sort: 6 },
        { value: 1, label: '请假', sort: 5 },
        { value: 2, label: '早退', sort: 4 },
        { value: 3, label: '迟到', sort: 3 },
        { value: 4, label: '迟到&早退', sort: 2 },
        { value: 5, label: '旷课', sort: 1 }
      ],
      queryParams: { search: '' },
      loading: false,
      drawerList: [],
      attendanceNames: '',
      attendanceTime: '',
      initData: []
    }
  },
  methods: {
    async drawer_handleClose() {
      try {
      } finally {
        let res = await deleteTeacherAttendance(this.attendanceTeacherId)
        // 取消考勤成功
        if (res.code == 200) {
          this.$modal.msgSuccess('取消考勤成功')
          this.$emit('update:open', false)
          this.$emit('refresh', true)
        }
      }
    },
    // 考勤状态变更
    statusChoose(statusItem, scopeRow, scopeIndex, key) {
      console.log(statusItem, scopeRow, scopeIndex, key)
      for (let i = 0; i < this.initData.length; i++) {
        if (scopeRow.studentNum + '' == this.initData[i].studentNum + '') {
          if (key == 'status') {
            this.initData[i].status = statusItem.value
          } else {
            this.initData[i].remark = statusItem.remark
          }
        }
      }
      console.log(this.initData)
      if (key == 'status') {
        this.drawerList[scopeIndex].status = statusItem.value
      } else {
        this.drawerList[scopeIndex].remark = statusItem.remark
      }

      // 局部更新
      this.$forceUpdate()
    },
    async saveDrawer() {
      if (this.drawerList.length == 0) {
        // 表数据为空
        this.$modal.msgError('表数据为空')
        return false
      }
      this.loading = true
      try {
        let res = await recordAttendance(this.initData)
        const { code } = res
        if (code == 200) {
          // 考勤成功
          this.$modal.msgSuccess('新增考勤成功')
          this.$emit('update:open', false)
          this.$emit('refresh', true)
        }
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    reset() {
      this.queryParams.search = ''
      this.getDrawerList('again')
    },
    // 获取抽屉的学生考勤列表
    async getDrawerList(type) {
      console.log('获取抽屉的学生考勤列表', type)
      this.loading = true

      try {
        let res = await attendanceStudentListByCourseScheduling(
          {
            attendanceTeacherId: this.attendanceTeacherId,
            search: this.queryParams.search
          },
          this.courseSchedulingId
        )
        const { code, data } = res
        if (code == 200) {
          if (data.length > 0) {
            this.attendanceNames = data[0].list[0].attendanceNames
            this.attendanceTime = data[0].list[0].assessmentTime
            let drawerList = []
            data.map((item) => {
              drawerList.push({ ...item.list[0], edit: true })
            })
            if (type == 'first') {
              this.initData = drawerList
              console.log('initData', this.initData)
            }
            this.drawerList = drawerList
            if (type == 'again') {
              // 先更改表现显示的
              for (let i = 0; i < this.drawerList.length; i++) {
                for (let j = 0; j < this.initData.length; j++) {
                  if (
                    this.drawerList[i].studentNum + '' ==
                    this.initData[j].studentNum + ''
                  ) {
                    this.drawerList[i].status = this.initData[j].status
                    this.drawerList[i].remark = this.initData[j].remark
                  }
                }
              }
            }
          }
        }
      } catch (error) {
        console.error(error)
      } finally {
        this.loading = false
      }
    },
    // 导出
    async confirmexport(str) {
      let obj = this.queryParams
      obj.params = str
      this.download(
        `/school/system/exportData/courseConstructionExport`,
        obj,
        `课程建设情况表_${formatDate(new Date())}.xlsx`
      )
    }
  }
}
</script>

<style scoped lang="scss">
.bottom_line {
  color: #1684fc;
  text-decoration: underline #1684fc;
}

.red {
  color: red;
}

.search_courseNo {
  margin-bottom: 16px;
  font-family: PingFangSC, PingFang SC, sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #333333;
  line-height: 25px;
  text-align: left;
  font-style: normal;
}

.drawer-content {
  padding: 20px 28px 0 32px;
}

.drawer-title {
  box-sizing: border-box;
  height: 70px;
  border-bottom: 1px solid #edeff0;
  padding: 0 32px;

  .t1 {
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #333333;
    line-height: 70px;
    text-align: left;
    font-style: normal;
  }

  .t2 {
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #333333;
    line-height: 70px;
    font-style: normal;
  }
}

.mt16 {
  margin-top: 16px;
}

.ml24 {
  margin-left: 24px;
}

.ml12 {
  margin-left: 12px;
}
</style>
